<template>
	<view class="wrap-item flex align-center just-between row-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<view class="wrap-right flex align-center">
			<input
				class="input f-30 text-right"
				:placeholder="item.place"
				placeholder-class="place"
				:type="item.mode"
				:maxlength="item.maxlength"
				:value="value"
				@input="$emit('input', $event.detail.value)"
			/>

			<view class="code-btn f-30" @click="onGetCode">{{ codeTips }}</view>
		</view>
	</view>
</template>

<script>
	import { smsSend } from "@/API/common.js";
	export default {
		props: {
			/**
			 * 手机号
			 */
			mobile: {
				type: String,
				default: "",
			},
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 验证码类型
			 */
			codeType: {
				type: String,
				default: "blind_bank",
			},
		},
		data() {
			return {
				countdownInterval: null,
				countTime: 60,
				codeTips: "获取验证码",
			};
		},
		mounted() {
			clearInterval(this.countdownInterval);
		},
		methods: {
			/**
			 * 获取验证码
			 */
			onGetCode() {
				if (this.codeTips !== '获取验证码') {
					return;
				}
				if (this.mobile === "") {
					this.$st.show("请输入手机号");
					return;
				}
				this.$throttle(() => {
					smsSend(this.mobile, this.codeType)
						.then((res) => {
							this.$st.success("验证码已发送");
							this.startCountdown();
						})
				})
			},
			/**
			 * 倒计时
			 */
			startCountdown() {
				this.countTime = 60;
				this.countdownInterval = setInterval(() => {
					if (this.countTime > 0) {
						this.countTime--;
						this.codeTips = this.countTime + "s后获取";
					} else {
						clearInterval(this.countdownInterval);
						this.codeTips = "获取验证码";
					}
				}, 1000);
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";

	.code-btn {
		color: #eb5c20;
	}
</style>
